const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 通过 npm 安装
const webpack = require('webpack') // 用于访问内置插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')
module.exports = {
  entry: './src/main.js', // enter: 默认入口
  output: {
    path: path.join(__dirname, 'dist'), // 出口"文件夹"名
    filename: 'bundle.js' // 出口"文件"名
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  // plugins: [
  //   new MiniCssExtractPlugin({
  //     filename: 'css/[name].css'
  //   })
  // ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        type: 'asset'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'font/[name].[hash:6][ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
   
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename:'bundle.jss'
    })
  ],
  devServer: {
    port: 3000,
    open: true
  }
}
